<template name="basics">
    <view class="margin-top">
        <scroll-view scroll-y class="page">
            <view class="nav-list">
                <navigator hover-class="none" :url="'/pages/component/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
                    :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
                    <view class="nav-title">{{item.title}}</view>
                    <view class="nav-name">{{item.name}}</view>
                </navigator>
            </view>
            <view class="cu-tabbar-height"></view>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        name: "basics",
        data() {
            return {
                elements: [{
                        title: '表单',
                        name: 'form',
                        color: 'cyan',
                    },
                    {
                        title: '列表',
                        name: 'list',
                        color: 'pink'
                    },
                    {
                        title: '卡片',
                        name: 'card',
                        color: 'brown'
                    },
                    {
                        title: '搜索',
                        name: 'search',
                        color: 'brown'
                    },
                    {
                        title: '顶部提示',
                        name: 'toptips',
                        color: 'pink'
                    },
                    {
                        title: '模态框',
                        name: 'modal',
                        color: 'grey',
                    },{
						title: '轮播',
						name: 'swiper',
						color: 'olive'
					},{
						title: '卡片',
						name: 'slide',
						color: 'olive'
					},{
						title:'骨架屏',
						name:'skeleton',
						color:'brown'
					},{
						title:'通告栏',
						name:'noticeBar',
						color:'olive'
					},{
						title:'Tab标签页',
						name:'tab',
						color:'olive'
					},
                    {
                        title: '步骤条',
                        name: 'steps',
                        color: 'pink'
                    },
                    {
                        title: '遮罩层',
                        name: 'overlay',
                        color: 'pink'
                    },
                    {
                        title: '面板',
                        name: 'panel',
                        color: 'pink'
                    },
                    {
                        title: '二维码',
                        name: 'qrcode',
                        color: 'pink'
                    },
                    {
                        title: '条形码',
                        name: 'barcode',
                        color: 'pink'
                    },
                    {
                        title: '圆形进度条',
                        name: 'circle',
                        color: 'pink'
                    },
                    {
                        title: '表格',
                        name: 'table',
                        color: 'pink'
                    }
                ],
            };
        }
    }
</script>

<style>
    .bg-red {
        background-color: #e54d42;
        color: #ffffff;
    }

    .bg-orange {
        background-color: #f37b1d;
        color: #ffffff;
    }



    .bg-olive {
        background-color: #8dc63f;
        color: #ffffff;
    }



    .bg-cyan {
        background-color: #1cbbb4;
        color: #ffffff;
    }



    .bg-purple {
        background-color: #6739b6;
        color: #ffffff;
    }

    .bg-mauve {
        background-color: #9c26b0;
        color: #ffffff;
    }

    .bg-pink {
        background-color: #e03997;
        color: #ffffff;
    }

    .bg-brown {
        background-color: #a5673f;
        color: #ffffff;
    }
</style>
